<template>
  <div class="simple-list">
    <div class="list-title" @click="props.click(props.id, -1)">{{ props.media }}</div>
    <div v-for="(item, index) in props.arr" @click="props.click(props.id, index)">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(['arr', 'top', 'right', 'active', 'id', 'click', 'media'])
</script>

<style scoped>
.simple-list {
  position: absolute;
  top: v-bind('props.top');
  right: v-bind('props.right');

  width: max-content;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  box-shadow: 2.8px 2.8px 2.2px #f58f09aa
}

.simple-list>div {
  align-items: center;
  justify-content: center;
  display: flex;
  padding: 10px 20px;
  width: 100%;
  height: 100%;
}

.simple-list>div:hover {
  color: #f59009;
  cursor: pointer;
}

.list-title {
  color: #f59009;
}
</style>